<template>
    <!-- 所有的内容要被根节点包含 -->
    <div id="head">
        <h2 class="header">这是一个head组件--{{message}}</h2>
    </div>
</template>

<script>
export default {
  data() {
    return {
      message: "我是一个head组件"
    };
  }
};
</script>


<!-- 方法二 或者添加scoped ，部作用域，两者选其一。 -->
<style lang="scss" scoped>
/* 方法一：#home指定作用域 */
.header {
  background: green;
  color: #fff;
}
</style>